<template>
  <div class="wrap">
    <div class="menu">
      <a-tabs
        :default-active-key="appStore.currentTabsKey"
        @change="tabsChange"
      >
        <a-tab-pane class="" key="1" title="立体柱状图">
          <div class="tabs_item">
            <Ltzzt class="chart"></Ltzzt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="横向柱状图">
          <div class="tabs_item">
            <Hxzzt class="chart"></Hxzzt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="立体圆柱图">
          <div class="tabs_item">
            <Ltyzt class="chart"></Ltyzt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" title="曲线图">
          <div class="tabs_item">
            <Qxt class="chart"></Qxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" title="折线图">
          <div class="tabs_item">
            <Zxt class="chart"></Zxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" title="散点图">
          <div class="tabs_item">
            <Sdt class="chart"></Sdt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="7" title="立体环形图">
          <div class="tabs_item">
            <Lthxt class="chart"></Lthxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="8" title="平面环形图">
          <div class="tabs_item">
            <Pmhxt class="chart"></Pmhxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="9" title="纯色背景环形进度条">
          <div class="tabs_item">
            <div>纯色背景环形进度条</div>
            <Csbghxjdt class="chart"></Csbghxjdt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="10" title="图片背景环形进度条">
          <div class="tabs_item">
            <div>图片背景环形进度条</div>
            <Imgbghxjdt class="chart"></Imgbghxjdt>
          </div>
        </a-tab-pane>

        <a-tab-pane key="11" title="光球数字图">
          <div class="tabs_item">
            <div>光球数字图</div>
            <Gqszt class="chart"></Gqszt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="12" title="玫瑰图">
          <div class="tabs_item">
            <div>玫瑰图</div>
            <Mgt class="chart"></Mgt>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick } from "vue";
export default defineComponent({
  name: "App",
});
</script>
<script setup>
import Ltzzt from "./components/ltzzt/index.vue";
import Hxzzt from "./components/hxzzt/index.vue";
import Ltyzt from "./components/ltyzt/index.vue";
import Qxt from "./components/qxt/index.vue";
import Zxt from "./components/zxt/index.vue";
import Pmhxt from "./components/pmhxt/index.vue";
import Lthxt from "./components/lthxt1/index.vue";
import Csbghxjdt from "./components/csbghxjdt/index.vue";
import Imgbghxjdt from "./components/imgbghxjdt/index.vue";
import Sdt from "./components/sdt/index.vue";
import Gqszt from "./components/gqszt/index.vue";
import Mgt from "./components/mgt/index.vue";

import { useAppStore } from "./store/index.js";

const appStore = useAppStore();

// // 当前的选项key
// const currentSelectChartKey = ref(null);

// // tabs的切换事件
const tabsChange = (key) => {
  appStore.currentTabsKey = key;
  // localStorage.setItem("tabsKey", key);
};

// nextTick(() => {
//   let tabsKey = localStorage.getItem("tabsKey");
//   console.log(tabsKey);
//   if (tabsKey) {
//     currentSelectChartKey.value = tabsKey;
//   }
// });

// // 初始化
// onMounted(() => {});
</script>

<style lang="scss" scoped>
.tabs_item {
  width: 100%;
  height: 100vh;
  position: relative;
  .chart {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
</style>
